﻿$(window).load(function(){$(".loading").fadeOut()})
$(function () {
    echarts_1()
    echarts_2()
    echarts_3()
    echarts_4()
    echarts_5()
    echarts_6()
    echarts_7()
    echarts_8()
})

//月总销量分析
function echarts_1() {
    var myChart = echarts.init(document.getElementById('echarts1'));
    option = {
              //  backgroundColor: '#00265f',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '0%',
                top:'10px',
                right: '0%',
                bottom: '0',
               containLabel: true
            },
            xAxis: [{
                type: 'category',
                    data: month_data['names'],
                axisLine: {
                    show: true,
                 lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLabel:  {
                        interval: 0,
                       // rotate:50,
                        show: true,
                        splitNumber: 5,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '12',
                        },
                    },
            }],
            yAxis: [{
                type: 'value',
                min: 600000, // 最小值
                axisLabel: {
                   //formatter: '{value} %'
                    show:true,
                     textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '12',
                        },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1	)",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                     show: false,
                    lineStyle: {
                       color: "rgba(255,255,255,.1)",
                    }
                }
            }],
            series: [{
                name: '总销售额',
                type: 'line',
                smooth: true,
                data: month_data['data'],
                itemStyle: {
                    normal: {
                        color:'#2f89cf',
                        opacity: 1,

                        barBorderRadius: 5,
                    }
                }
            }]
        };
    myChart.setOption(option);
}

//月销量对比分析
function echarts_2(){
    var myChart = echarts.init(document.getElementById('echarts2'));
    option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['上月销量', '本月销量'],
                top:'2%',
                textStyle: {
                    color: "rgba(255,255,255,.5)",
                    fontSize: '12',

                },
                itemWidth: 12,
                itemHeight: 12,
                itemGap: 35
            },
            grid: {
                left: '0%',
                top:'40px',
                right: '0%',
                bottom: '0%',
               containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: compare_data['names'],
                axisLine: {
                    show: true,
                 lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLabel:  {
                        interval: 0,
                       // rotate:50,
                        show: true,
                        splitNumber: 15,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '14',
                        },
                    },
            }],
            yAxis: [{
                type: 'value',
                axisLabel: {
                   //formatter: '{value} %'
                    show:true,
                     textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '14',
                        },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1	)",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    lineStyle: {
                       color: "rgba(255,255,255,.1)",
                    }
                }
            }],
            series: [{
                name: '上月销量',
                type: 'bar',
                data: compare_data['last_month'],
                barWidth:'20%', //柱子宽度
               // barGap: 1, //柱子之间间距
                itemStyle: {
                    normal: {
                        color:'#2f89cf',
                        opacity: 1,
                        barBorderRadius: 5,
                    }
                }
            }, {
                name: '本月销量',
                type: 'bar',
                data: compare_data['deal_amount'],
                barWidth:'20%',
               // barGap: 1,
                itemStyle: {
                    normal: {
                        color:'#62c98d',
                        opacity: 1,
                        barBorderRadius: 5,
                    }
                }
            },
            ]
        };
    myChart.setOption(option);
}


// 学历分析
function echarts_3() {
	var myChart = echarts.init(document.getElementById('echarts3'));

    // 访客属性：学历分析

    option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {d}%",
            position:function(p){   //其中p为当前鼠标的位置
                return [p[0] + 10, p[1] - 10];
            }
        },
        legend: {
           orient: 'vertical',
            top:'center',
            right:0,
           itemWidth: 10,
            itemHeight: 10,
            data: educate_data['names'],
            textStyle: {
                color: 'rgba(255,255,255,.5)',
                fontSize:'12',
            }
        },
        series: [
            {
                name:'学历',
                type:'pie',
                center: ['35%', '50%'],
                radius: ['40%', '50%'],
                color: ['#62c98d', '#2f89cf', '#4cb9cf', '#e0c828','#e58c00','#eb295b'],
                label: {show:false},
                labelLine: {show:false},
                data: educate_data['value']
            }
        ]
    };
    myChart.setOption(option);
}

// 年龄分布
function echarts_4() {
    var myChart = echarts.init(document.getElementById('echarts4'));
    option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}:{d}%",
            position:function(p){   //其中p为当前鼠标的位置
                return [p[0] + 10, p[1] - 10];
            }
        },
        legend: {
            orient: 'vertical',
            top:'center',
            right:'8%',
            itemWidth: 10,
            itemHeight: 10,
            data: age_data['names'],
            textStyle: {
            color: 'rgba(255,255,255,.5)',
            fontSize:'12',
            }
        },
        series: [
            {
                name:'年龄分布',
                type:'pie',
                center: ['40%', '50%'],
                radius: ['40%', '50%'],
                color: ['#62c98d', '#2f89cf', '#4cb9cf', '#e0c828','#e58c00','#eb295b'],
                label: {show:false},
                labelLine: {show:false},
                data: age_data['value']
            }
        ]
    };
    myChart.setOption(option);
}

// 浏览量饼状图
function echarts_5(){
    var myChart = echarts.init(document.getElementById('echarts5'));

    option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)",
            position:function(p){   //其中p为当前鼠标的位置
                return [p[0] + 10, p[1] - 10];
            }
        },
        legend: {
           orient: 'vertical',
            top:'25%',
            right:0,
            itemWidth: 10,
            itemHeight: 10,
            data: view_count_data['names'],
            textStyle: {
                color: 'rgba(255,255,255,.5)',
                fontSize:'12',
            }
        },
        series: [
            {
                name:'浏览量占比',
                type:'pie',
                center: ['35%', '50%'],
                radius: ['40%', '50%'],
                color: ['#62c98d', '#2f89cf', '#4cb9cf', '#e0c828','#e58c00','#eb295b'],
                label: {show:false},
                labelLine: {show:false},
                data: view_count_data['values']
            }
        ]
    };

    myChart.setOption(option);
}


// 访客数分析
function echarts_6() {
    var myChart = echarts.init(document.getElementById('echarts6'));
    option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)",
            position:function(p){   //其中p为当前鼠标的位置
                return [p[0] + 10, p[1] - 10];
            }
        },
        legend: {
            orient: 'vertical',
            top:'25%',
            right:'8%',
           itemWidth: 10,
            itemHeight: 10,
            data: visitor_count_data['names'],
            textStyle: {
                color: 'rgba(255,255,255,.5)',
                fontSize:'12',
            }
        },
        series: [
            {
                name:'访客数占比',
                type:'pie',
                center: ['40%', '50%'],
                radius: ['40%', '50%'],
                color: ['#62c98d', '#2f89cf', '#4cb9cf', '#e0c828','#e58c00','#eb295b'],
                label: {show:false},
                labelLine: {show:false},
                data: visitor_count_data['values']
            }
        ]
    };
    myChart.setOption(option)
}

//商品销量分析
function echarts_7() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echarts7'));
    option = {
      //  backgroundColor: '#00265f',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: per_day_deal_amount['names'],
            top:'5%',
            textStyle: {
                color: "#fff",
                fontSize: '12',
            },
            itemGap: 35
        },
        grid: {
            left: '0%',
            top:'40px',
            right: '0%',
            bottom: '0',
           containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: per_day_deal_amount['date'],
            axisLine: {
                show: true,
             lineStyle: {
                    color: "rgba(255,255,255,.1)",
                    width: 1,
                    type: "solid"
                },
            },
            axisTick: {
                show: false,
            },
            axisLabel:  {
                    interval: 0,
                   // rotate:50,
                    show: true,
                    splitNumber: 5,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
        }],
        yAxis: [{
            type: 'value',
            axisLabel: {
               //formatter: '{value} %'
                show:true,
                 textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(255,255,255,.1	)",
                    width: 1,
                    type: "solid"
                },
            },
            splitLine: {
                lineStyle: {
                   color: "rgba(255,255,255,.1)",
                }
            }
        }],
        series: per_day_deal_amount['values']
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}


//商品加购分析
function echarts_8() {
    var myChart = echarts.init(document.getElementById('echarts8'));
    option = {
        barWidth: 15,
        xAxis: {
            type: 'value',
            splitLine: {

                lineStyle: {
                    color: "rgba(255,255,255,0.2)",
                     type: 'dashed'
                }
            },
            axisTick: {
                show: false
            },

            axisLabel: { //  改变x轴字体颜色和大小
                textStyle: {
                    color: "rgba(250,250,250,0.6)",
                    fontSize: 10
                }
            }
        },
        yAxis: {
            type: 'category',
            data: additional_deal_data['names'],
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: { //  改变y轴颜色
                lineStyle: {
                    color: '#2c4054'
                }
            },
            axisLabel: { //  改变y轴字体颜色和大小
                textStyle: {
                    color: "rgba(250,250,250,0.6)",
                    fontSize: 10
                }
            }
        },
        series: [{
                type: 'bar',
    //            name: "产出",
                 barWidth : 15,
                itemStyle: {
                    normal: {
                        label: {
                            show: true, //开启显示
                            position:"insideRight", //在上方显示
                            textStyle: { //数值样式
                                color: "#FFFFFF",
                                fontSize: 10,
                                fontWeight: 60
                            }
                        },
                        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: 'rgba(24,144,255,1)'
                        }, {
                            offset: 1,
                            color: 'rgba(24,144,255,0)'
                        }]),
                        barBorderRadius:15

                    }
                },
                data: additional_deal_data['values'],
            }
        ]
    };
    myChart.setOption(option);
}